<template>
    <div class="overview-control">
        <el-scrollbar style="height: 100%">
          <div style="padding: 7px;">
            <div class="modular-wrap">
              <div class="modular-header">
                <span class="title">基础信息</span>
                <a class="link-btn"> 一站一档 >> </a>
              </div>
              <div class="modular-body">
                <div class="modular-row clear">
                  <div class="base-info">
                    <div class="base-title">
                      <i class="base-site-icon"></i>
                      <span class="base-site-name">
                        {{ siteInfo.stationName }}
                      </span>
                      <a href="javascript:;" class="details-ben" @click="siteDetails = true;">详情</a>
                    </div>
                    <ul class="base-info-list">
                      <li>
                        <p>全&emsp;&emsp;称：
                          {{ siteInfo.stationName }}
                        </p>
                        <p>所属流域：
                          {{ siteInfo.basinn.basinnName }}
                        </p>
                      </li>
                      <li>
                        <p>建站时间：
                          {{siteInfo.buildTime }}
                        </p>
                        <p>所属区域：
                          {{  siteInfo.area.areaName}}
                        </p>
                      </li>
                      <li>
                        <p>地表水类型：{{ siteInfo.stationtype }}</p>
                        <p>水质目标级别：<i class="target-level"></i>Ⅲ级</p>
                      </li>
                    </ul>
                  </div>
                  <div class="base-img">
                    <img src="../../assets/images/index/site-icon.png" />
                  </div>
                </div>
                <div class="modular-row clear">
                  <div class="secondary-title">仪器参数</div>
                  <div class="secondary-menu">
                    <span class="item">溶解氧（力合）</span>
                    <span class="item">氨氮（力合）</span>
                    <span class="item">总磷（力合）</span>
                    <span class="item">总氮（力合）</span>
                    <span class="item">水温（力合）</span>
                    <span class="item">pH（力合）</span>
                    <span class="item">电导率（力合）</span>
                    <span class="item">浊度（力合）</span>
                    <span class="item">高锰酸盐指数（力合）</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="modular-wrap">
              <div class="modular-header">
                <span class="title">监测数据</span>
              </div>
              <div class="modular-body" style="padding: 0">
                <div class="monitoring-info">
                  <div class="monitoring-title">
                    <span class="title"><i class="abnormal-icon"></i> 异常超标</span>
                    <span class="title"><i class="site-normal-icon"></i> 站点正常</span>
                    <span class="title"><i class="site-offline-icon"></i> 站点离线</span>
                    <div class="toolbar">
                      <el-button type="secondBtn">去溯源</el-button>
                    </div>
                  </div>
                  <div class="monitoring-text">
                    <span>超标污染物：pH、高锰酸盐、总磷</span>
                    <span>水质现状：<i class="water-quality typeC"></i> Ⅲ级</span>
                    <span>目标水质：<i class="water-quality typeC"></i> Ⅲ级</span>
                  </div>
                </div>
                <div class="audit-status">
                  <div class="audit-title">
                    <span class="title"><i class="audit-icon"></i> 审核状态</span>
                  </div>
                  <div class="audit-wrap">
                    <span class="audit-item"><i class="state-icon state-normal"></i> 工程师（10:00:00）</span>
                    <span class="audit-item"><i class="state-icon"></i> 省厅（待审核）</span>
                    <span class="audit-item"><i class="state-icon"></i> 总站（待审核）</span>
                  </div>
                </div>
                <div class="audit-data-wrap">
                  <div class="audit-data-title">
                    <span class="title">最新数据时间：2018-05-09 10:20:20</span>
                    <div class="toolbar">
                      <el-button type="secondBtn" @click="auditDate">去审核</el-button>
                    </div>
                  </div>
                  <div class="audit-data-content">
                    <ul class="audit-data-list clear">
                      <li v-for="(item,index) in auditData">
                        <p><span class="value">{{ item.value }}</span><span class="company">{{ item.company }}</span></p>
                        <div class="audit-text">
                          <span>{{ item.factor }}</span>
                          <el-tooltip class="item" effect="dark" :content="setGradeClass(item,'val')" placement="top">
                            <i class="grade-icon" :class="setGradeClass(item,'cls')"></i>
                          </el-tooltip>
                        </div>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
            <div class="modular-wrap">
              <div class="modular-header">
                <span class="title">报警提醒</span>
              </div>
              <div class="modular-body" style="padding-bottom: 0">
                <p class="statistical-info">该点位当前共2条报警信息；1条已响应但未结束； 1条未响应。</p>
                <ul class="alarm-reminder-list">
                  <li>
                    <span class="name">总氮分析仪管路漏气</span>
                    <span class="time">已用时：10:00:00</span>
                    <a href="javascript:;" class="handle-btn">去处理 <i class="el-icon-arrow-right"></i></a>
                  </li>
                  <li>
                    <span class="name">总氮分析仪管路漏气</span>
                    <span class="time">已用时：10:00:00</span>
                    <a href="javascript:;" class="handle-btn">去处理 <i class="el-icon-arrow-right"></i></a>
                  </li>
                </ul>
              </div>
            </div>
            <div class="modular-wrap">
              <div class="modular-header">
                <span class="title">预警提醒</span>
              </div>
              <div class="modular-body" style="padding-bottom: 0">
                  <ul class="warning-reminder-list">
                    <li>
                      <span class="name">氨氮氧化液试剂即将不足，预计还可用10次，请提前准备</span>
                      <a href="javascript:;" class="operation-btn">录入试剂更换记录 <i class="el-icon-arrow-right"></i></a>
                    </li>
                    <li>
                      <span class="name">上次周质控距今已6天</span>
                      <a href="javascript:;" class="operation-btn">运维录入 <i class="el-icon-arrow-right"></i></a>
                    </li>
                  </ul>
              </div>
            </div>
            <div class="modular-wrap">
              <div class="modular-header">
                <span class="title">运维信息</span>
              </div>
              <div class="modular-body">
                <div class="operation-title clear">
                  <span class="title">运维人员：涂利彬（宇星科技 10000000000）</span>
                  <div class="btn-wrap">
                    <a class="operation-btn" href="javascript:;"> 运维录入 </a>
                    <a class="operation-btn" href="javascript:;"> 生成任务 </a>
                  </div>
                </div>
                <p class="operation-text">
                  <span>最后一次运维日期： 2018-11-24 08:00:00</span>
                  <span>最后一次运维活动：巡检</span>
                </p>
                <p class="operation-text">上次周质控距今已有6天，请尽快进行。</p>
              </div>
            </div>
          </div>
        </el-scrollbar>
      <el-dialog
        width="780px"
        title="橘子洲-站点详情"
        :append-to-body = 'true'
        custom-class = "no-padding-dialog"
        :visible.sync="siteDetails" >
        <site-details-info></site-details-info>
      </el-dialog>


    </div>
</template>

<script>
  import siteDetailsInfo from './siteDetailsInfo'
    export default {
        name: "overviewControl",
        components:{
          siteDetailsInfo
        },
        data(){
          return{
            siteDetails: false,
            //审核最新数据
            auditData:[
              {
              value:'7',
              company:'',
              factor:'pH',
              grade:1
            },{
              value:'20',
              company:'℃',
              factor:'水温',
              grade:2
            },{
              value:'27.2',
              company:'NTU',
              factor:'浊度',
              grade:3
            },{
              value:'0.13',
              company:'mg/l',
              factor:'氨氮',
              grade:4
            },{
              value:'0.13',
              company:'mg/l',
              factor:'总氮',
              grade:5
            },{
              value:'0.13',
              company:'mg/l',
              factor:'总磷',
              grade:6
            },{
              value:'0.2',
              company:'mg/l',
              factor:'溶解氧',
              grade:6
            },{
              value:'0.2',
              company:'μS/cm',
              factor:'电导率',
              grade:1
            },{
              value:'0.2',
              company:'mg/l',
              factor:'高锰酸钾盐指数',
              grade:1
            }
            ],
            siteInfo:{
              stationName:'-',
              area:{
                areaName:'',
              },
              basinn:{
                basinnName:'-',
              },
              buildTime:'-',
              stationtype:'-'
            }
          }
        },
        computed: {
          siteMn: {
            get: function() {
              return this.$store.state.siteMn.stationMn;
            }
          }
        },
        methods:{
          setGradeClass(item,type){
            let grade = item.grade;
            let cls = '';
            let val = '';
            switch (grade) {
              case 1:
                cls = 'grade-a';
                val = 'Ⅰ类';
                break;
              case 2:
                cls = 'grade-a';
                val = 'Ⅱ类';
                break;
              case 3:
                cls = 'grade-b';
                val = 'Ⅲ类';
                break;
              case 4:
                cls = 'grade-c';
                val = 'Ⅳ类';
                break;
              case 5:
                cls = 'grade-d';
                val = 'Ⅴ类';
                break;
              case 6:
                cls = 'grade-e';
                val = '劣Ⅴ类';
                break;
            }
            if(type === 'val'){
              return val;
            }else{
              return cls;
            }

          },
          //去审核
          auditDate(){
            this.$confirm('跳转后不可返回','是否进入数据审核模块',{
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning',
              center: true
            }).then(()=>{
              this.$router.push('/dataAudit/data/threelevelAudit');
            }).catch(()=>{

            });
          },
          //获取基本信息
          getBaseInfo(){
            this.$http.get('/SiteManagement/station/stationInfoByMn',{
              params:{
                mn: this.siteMn
              }
            }).then((res)=>{
              console.log(res);
              if(res.data.code === 0){
                this.siteInfo = res.data.content.info;
              }
            }).catch((error)=>{
              console.log(error);
            })
          }
        },
        mounted(){

        },
        created(){
          this.getBaseInfo();
        }
    }
</script>

<style scoped lang="less">
.overview-control{
  height: 466px;
}
.link-btn{
  float: right;
  color: #999999;
  &:hover{
    color: #166bce;
  }
  &:hover{
    color: #0f509c;
  }
}

.modular-wrap{
  border: 1px solid #dce9fa;
  margin-bottom: 8px;
  &:last-child{
    margin-bottom: 0;
  }
  .modular-header{
    height: 37px;
    line-height: 36px;
    border-bottom: 1px solid #dce9fa;
    padding: 0 16px;
    .title{
      font-size: 14px;
      &:before{
        content: '';
        display: inline-block;
        vertical-align: middle;
        margin-bottom: 3px;
        width: 3px;
        height: 10px;
        background: #166bce;
        margin-right: 8px;
      }
    }
  }
  .modular-body{
    min-height: 100px;
    padding: 16px;
  }
  .base-info{
    float: left;
    width: calc(100% - 134px);
    .base-site-icon{
      display: inline-block;
      vertical-align: middle;
      margin-bottom: 3px;
      width: 20px;
      height: 29px;
      background: url("../../assets/images/state-icon.png") no-repeat;
      margin-right: 8px;
    }
    .base-site-name{
      font-size: 16px;
      margin-right: 14px;
    }
    .details-ben{
      display: inline-block;
      vertical-align: middle;
      margin-bottom: 3px;
      border: 1px solid #9cb0c9;
      border-radius: 5px;
      font-size: 12px;
      color: #778699;
      padding: 0 6px;
      &:hover{
        color: #166bce;
        border: 1px solid #166bce;
      }
      &:active{
        color: #fff;
        border: 1px solid #166bce;
        background: #166bce;
      }
    }
    .base-info-list{
      &>li{
        float: left;
        width: 33.3%;
        line-height: 26px;
      }
    }
  }
  .secondary-title{
    font-weight: 700;
    padding-left: 20px;
    margin-bottom: 10px;
    background: url("../../assets/images/list-icon.png") no-repeat left center;
  }
  .secondary-menu{
    .item{
      display: inline-block;
      vertical-align: top;
      border: 1px solid #cad9eb;
      height: 30px;
      line-height: 28px;
      padding:0 15px;
      margin-bottom: 7px;
    }
  }
  .base-img{
    float: right;
    width: 134px;
    height: 100px;
  }
  .alarm-reminder-list{
    &>li{
      border-bottom: 1px solid #dce9fa;
      line-height: 44px;
      padding-left: 8px;
      .name{
        display: inline-block;
        vertical-align: top;
        padding-left: 20px;
        width: 240px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        background: url("../../assets/images/dian_aa_icon.png") no-repeat left center;
      }
      .handle-btn{
        float: right;
        color: #999999;
        &:hover{
          color: #166bce;
        }
        &:active{
          color: #0f509c;
        }
      }
    }
    &>li:last-child{
      border: none;

    }
  }
  .warning-reminder-list{
    &>li{
      border-bottom: 1px solid #dce9fa;
      line-height: 44px;
      padding-left: 8px;
      .name{
        display: inline-block;
        vertical-align: top;
        padding-left: 20px;
        width: 500px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        background: url("../../assets/images/list-icon.png") no-repeat left center;
      }
      .operation-btn{
        float: right;
        color: #999999;
        &:hover{
          color: #166bce;
        }
        &:active{
          color: #0f509c;
        }
      }
    }
    &>li:last-child{
      border: none;

    }
  }
  .operation-title{
    padding-bottom: 6px;
    .title{
      padding-left: 20px;
      background: url("../../assets/images/list-icon.png") no-repeat left center;
    }
    .btn-wrap{
      float: right;
    }
    .operation-btn{
      color: #166bce;
      padding: 0 16px;
      position: relative;
      &:after{
        content:'';
        position: absolute;
        top: 4px;
        right: 0;
        width: 1px;
        height: 12px;
        background: #dce9fa;
      }
      &:hover{
        color: #1155a3;
      }
    }
  }
  .operation-text{
    padding-left: 20px;
    line-height: 28px;
    &>span{
      display: inline-block;
      vertical-align: middle;
      margin-bottom: 3px;
      width: calc(50% - 4px);
    }
  }
  .monitoring-info{
    border-bottom: 1px solid #DCE9FA;
    padding: 14px 16px;
    .monitoring-title{
      font-size: 15px;
      .title{
        color: #333333;
      }
    }
    .monitoring-text{
      margin-bottom: 3px;
      padding-left: 26px;
      line-height: 28px;
      &>span{
        display: inline-block;
        vertical-align: middle;
        margin-right: 48px;
      }
    }
    .toolbar{
      float: right;
    }
  }
  .audit-status{
    padding: 14px 16px 0;
    .audit-title{
      font-size: 15px;
      .title{
        color: #333333;
        .audit-icon{
          display: inline-block;
          vertical-align: middle;
          width: 19px;
          height: 18px;
          background: url("../../assets/images/index/s_shenghe_icon.png") no-repeat;
        }
      }
    }
    .audit-wrap{
      margin-bottom: 3px;
      padding-left: 26px;
      line-height: 28px;
      &>span{
        display: inline-block;
        vertical-align: middle;
        margin-right: 48px;
      }
      .state-icon{
        display: inline-block;
        vertical-align: middle;
        margin-bottom: 3px;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #c1ccd9;
        margin-right: 6px;
      }
      .state-normal{
        background: #36c25e;
      }
    }
  }
  .audit-data-wrap{
    padding: 0 16px 0;
    .audit-data-title{
      .title{
        padding-left: 20px;
        background: url("../../assets/images/list-icon.png") no-repeat left center;
        font-size: 12px;
      }
      .toolbar{
        float: right;
      }
    }
    .audit-data-content{
      .audit-data-list{
        &>li{
          width: 20%;
          text-align: center;
          float: left;
          padding: 10px 0;
          .value{
            font-size: 16px;
            color: #333;
            font-weight: 700;
          }
          .company{
            font-size: 12px;
          }
          .audit-text{
            line-height: 28px;
          }
        }
      }
    }

  }
}
  .abnormal-icon,.site-normal-icon,.site-offline-icon{
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 3px;
    width: 21px;
    height: 21px;
  }
  .abnormal-icon{
      background: url("../../assets/images/index/abnormal-icon.png") no-repeat;
  }
  .site-normal-icon{
    background: url("../../assets/images/index/normalSite.png") no-repeat;
  }
  .site-offline-icon{
    background: url("../../assets/images/index/siteOffline.png") no-repeat;
  }
  .water-quality{
    display: inline-block;
    vertical-align: middle;
    width: 18px;
    height: 18px;
    margin-bottom: 3px;
  }
  .typeA{
    background: url("../../assets/images/water_quality_01.png") no-repeat;
    background-size: 100% 100%;
  }
  .typeB{
    background: url("../../assets/images/water_quality_02.png") no-repeat;
    background-size: 100% 100%;
  }
  .typeC{
    background: url("../../assets/images/water_quality_03.png") no-repeat;
    background-size: 100% 100%;
  }
  .typeD{
    background: url("../../assets/images/water_quality_04.png") no-repeat;
    background-size: 100% 100%;
  }
  .typeE{
    background: url("../../assets/images/water_quality_05.png") no-repeat;
    background-size: 100% 100%;
  }
  .grade-icon{
    display: inline-block;
    vertical-align: middle;
    width: 10px;
    height: 11px;
    margin: 0 3px 3px;
  }
  .grade-a{
    background: url("../../assets/images/index/s_yierlei_icon.png") no-repeat;
  }
  .grade-b{
    background: url("../../assets/images/index/s_sanlei_icon.png") no-repeat;
  }
  .grade-c{
    background: url("../../assets/images/index/s_silei_icon.png") no-repeat;
  }
  .grade-d{
    background: url("../../assets/images/index/s_wulei_icon.png") no-repeat;
  }
  .grade-e{
    background: url("../../assets/images/index/s_liewulei_icon.png") no-repeat;
  }
</style>
